<script setup lang="ts">
import { ref, onMounted,nextTick } from "vue"
import { getVideoCategoryData, getVideoGroupListData } from '../../api/video'
import type { VideoCategoryType } from '../../types'
import VideoDetails from '../../components/VideoDetails.vue'
import { } from '../../router/index'
const active = ref(0);
const currentIndex = ref(0);
const loading = ref(false);
const videoArr = ref<VideoCategoryType[]>([]);

onMounted(async () => {
    loading.value = true;

    let { data } = await getVideoGroupListData()
    videoArr.value = data.data;
    changeVideoArr(data.data)
    await nextTick()
    loading.value = false;

})

// 截取video列表前十条数据
const changeVideoArr = (data: []) => {
    videoArr.value = data.slice(0, 10)
    console.log(videoArr.value);

}

</script>

<template >
    <div class="video-container">
        <!--  tabs标签页-->
        <div v-if="videoArr.length">
            <van-tabs v-model:active="active" swipeable sticky>
                <van-tab v-for="item in videoArr" :title="item.name" :key="item.id">
                    <keep-alive>

                        <VideoDetails :videoId="item.id"></VideoDetails>
                    </keep-alive>
                </van-tab>
            </van-tabs>
        </div>

        <!-- <van-loading v-if="!videoArr.length" type="circular" color="#000" /> -->
    </div>
    <van-loading v-if="loading" type="circular" color="#000" />

</template>
<style lang="scss">
.video-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    margin-bottom: 50px;
    overflow: auto;

    .van-tabs__wrap {
        background-color: white;
    }

    .nav {
        display: flex;
        justify-content: space-between;
        width: 200vw;
        text-align: center;
        overflow-x: auto;

        .title {
            // width: 100px;
            padding: 10px;
            margin: 10px;

        }

        .active {
            color: red;
            border-bottom: 1px solid red;
        }
    }

}
</style>